// 外部引入js文件，js代码必需写在 window.onload 的执行函数里
window.onload = () => {
    let outer1 = document.getElementById("outer1")
    let middle1 = document.getElementById("middle1")
    let inner1 = document.getElementById("inner1")

    //事件冒泡：事件从目标元素向上冒泡至根节点（由内而外）
    //一般默认为事件冒泡，第三参数false
    outer1.addEventListener("click", () => console.log("outer冒泡触发"))
    middle1.addEventListener("click", () => console.log("middle冒泡触发"), false)
    inner1.addEventListener("click", () => console.log("inner冒泡触发"))


    let outer2 = document.getElementById("outer2")
    let middle2 = document.getElementById("middle2")
    let inner2 = document.getElementById("inner2")

    //事件捕获：事件从DOM根节点向下传播至目标元素（由外而内）
    outer2.addEventListener("click", () => console.log("outer捕获触发"), true)
    middle2.addEventListener("click", () => console.log("middle捕获触发"), true)
    inner2.addEventListener("click", () => console.log("inner捕获触发"), true)

    //利用冒泡打印 ul 子元素
    document.querySelectorAll("ul")[0].addEventListener("click", (e) => {
        //打印li元素
        console.log(e.target.innerText)
            //打印事件监听器的父元素
        console.log(e.currentTarget)

    })

    //阻止冒泡或中断捕获
    let out = document.getElementById("out")
    let ins = document.getElementById("in")

    out.addEventListener("click", () => console.log("外层被冒泡"))
    ins.addEventListener("click", (e) => {
        //阻止了外层冒泡的进行
        e.stopPropagation()
        console.log("内层被冒泡")
    })


    //阻止事件默认行为
    let a = document.getElementsByTagName("a")[0].addEventListener("click", (e) => {
        //阻止超链接跳转
        e.preventDefault()
        console.log("超链接被点击")
    })
}